<template>
  <view class="flex-col page">
    <view class="flex-col section">

      <view class="flex-row justify-between items-center section_2 mt-9">
        <view class="flex-row items-center">
          <view class="flex-row items-center">
            <text class="font_2 text text_3">选择地区</text>
            <image class="ml-6 shrink-0 image_3"
              src="http://ts.ysgzt.cn/static/images/wechat/resources/7a71e3275cbc79f4b647a58d02925fd0.png" />
          </view>
          <view class="section_3"></view>
          <view class="flex-row group">
            <image class="shrink-0 image_2"
              src="http://ts.ysgzt.cn/static/images/wechat/resources/78cf7c7286f57276e4c7ff2ca29e4692.png" />
            <text class="ml-8 font text">搜索香烟</text>
          </view>
        </view>
        <view class="flex-col justify-start items-center text-wrapper"><text class="font text text_2">搜索</text></view>
      </view>
    </view>
    <view class="flex-col group_2">
      <view class="flex-col section_4">
        <text class="self-start font_3 text text_4">价格区间</text>
        <view class="mt-16 flex-row justify-evenly items-center self-stretch">
          <view class="flex-col justify-start items-center text-wrapper_2"><text class="font text">最高价</text></view>
          <view class="group_3"></view>
          <view class="flex-col justify-start items-center text-wrapper_2"><text class="font text">最低价</text></view>
        </view>
      </view>
      <view class="mt-8 flex-col section_5">
        <view class="flex-row justify-between items-center">
          <view class="flex-row">
            <image class="shrink-0 image_4"
              src="http://ts.ysgzt.cn/static/images/wechat/resources/8633e1df6b4a7afbfc6013c37c5deeb4.png" />
            <text class="ml-8 font_3 text text_5">今日行情</text>
          </view>
          <text class="font_2 text text_6">2025年2月5日</text>
        </view>
        <view class="flex-row justify-between group_4">
          <text class="font_4 text">品牌</text>
          <view class="flex-row group_5">
            <text class="font_4 text">参考价格</text>
            <text class="font_4 text ml-27">涨跌幅</text>
          </view>
        </view>
        <view class="flex-col list">
          <view class="flex-row justify-center items-center relative list-item" v-for="(item, index) in items"
            :key="index">
            <text class="font_3 text pos">中华（软）</text>
            <text class="font_5 text text_7">377.0</text>
            <view class="flex-row pos_2">
              <view class="flex-row">
                <image class="shrink-0 image_5"
                  src="http://ts.ysgzt.cn/static/images/wechat/resources/322f6f1bfba3e5ec7a20a8e906ea1060.png" />
                <text class="font_5 text text_8 ml-1-5">0.35</text>
              </view>
              <view class="flex-row items-center ml-25">
                <text class="font_2 text">历史行情</text>
                <image class="shrink-0 image_6 ml-7"
                  src="http://ts.ysgzt.cn/static/images/wechat/resources/649c969947935627670d26a01762a47d.png" />
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  components: {},
  props: {},
  data() {
    return {
      items: [null, null, null, null, null, null, null, null],
    };
  },

  methods: {},
};
</script>

<style scoped lang="scss">
.mt-9 {
  margin-top: 18rpx;
}

.ml-25 {
  margin-left: 50rpx;
}

.ml-7 {
  margin-left: 14rpx;
}

.ml-1-5 {
  margin-left: 3rpx;
}

.ml-27 {
  margin-left: 54rpx;
}

.page {
  background-color: #00000000;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  height: 100%;

  .section {
    padding: 34rpx 10rpx 19rpx 19rpx;
    background-color: #ffffff;

    .image {
      margin-left: 47rpx;
      width: 674rpx;
      height: 141rpx;
    }

    .section_2 {
      margin-right: 10rpx;
      padding: 4rpx 6rpx 4rpx 23rpx;
      background-color: #ffffff;
      border-radius: 34rpx;
      border-left: solid 1rpx #00806b;
      border-right: solid 1rpx #00806b;
      border-top: solid 1rpx #00806b;
      border-bottom: solid 1rpx #00806b;

      .text_3 {
        color: #011613;
      }

      .image_3 {
        width: 16rpx;
        height: 10rpx;
      }

      .section_3 {
        margin-left: 30rpx;
        background-color: #edeff0;
        width: 3rpx;
        height: 34rpx;
        border-left: solid 1rpx #edeff0;
        border-right: solid 1rpx #edeff0;
        border-top: solid 1rpx #edeff0;
        border-bottom: solid 1rpx #edeff0;
      }

      .group {
        padding: 0 23rpx;

        .image_2 {
          width: 31rpx;
          height: 30rpx;
        }
      }

      .text-wrapper {
        padding: 16rpx 0;
        background-color: #00806b;
        border-radius: 29rpx;
        width: 128rpx;
        height: 58rpx;

        .text_2 {
          color: #ffffff;
        }
      }
    }
  }

  .group_2 {
    padding: 16rpx 10rpx 0;

    .section_4 {
      padding: 32rpx 24rpx;
      background-color: #ffffff;
      border-radius: 10rpx;

      .text_4 {
        line-height: 27rpx;
      }

      .text-wrapper_2 {
        padding: 16rpx 0;
        background-color: #f7f7f7;
        border-radius: 29rpx;
        width: 312rpx;
        height: 58rpx;
      }

      .group_3 {
        width: 29rpx;
        height: 3rpx;
        border-left: solid 1rpx #eeeeee;
        border-right: solid 1rpx #eeeeee;
        border-top: solid 1rpx #eeeeee;
        border-bottom: solid 1rpx #eeeeee;
      }
    }

    .section_5 {
      padding: 32rpx 24rpx 41rpx;
      background-color: #ffffff;
      border-radius: 10rpx 10rpx 0 0;

      .image_4 {
        width: 28rpx;
        height: 28rpx;
      }

      .text_5 {
        line-height: 26rpx;
      }

      .text_6 {
        color: #9b9b9b;
      }

      .group_4 {
        margin-top: 32rpx;

        .font_4 {
          font-size: 24rpx;
          font-family: PingFangSC;
          line-height: 23rpx;
          color: #999999;
        }

        .group_5 {
          margin-right: 174rpx;
        }
      }

      .list {
        margin-top: 23rpx;

        .list-item {
          padding: 36rpx 2rpx 22rpx;
          border-top: solid 3rpx #eeeeee;
          border-bottom: solid 3rpx #eeeeee;

          .pos {
            position: absolute;
            left: 3rpx;
            bottom: 23rpx;
          }

          .font_5 {
            font-size: 28rpx;
            font-family: PingFangSC;
            line-height: 23rpx;
            color: #00806b;
          }

          .text_7 {
            line-height: 22rpx;
          }

          .pos_2 {
            position: absolute;
            right: 2rpx;
            bottom: 26rpx;

            .image_5 {
              width: 9rpx;
              height: 22rpx;
            }

            .text_8 {
              line-height: 22rpx;
            }

            .image_6 {
              width: 10rpx;
              height: 16rpx;
            }
          }
        }
      }
    }

    .font_3 {
      font-size: 28rpx;
      font-family: PingFangSC;
      line-height: 28rpx;
      color: #011613;
    }
  }

  .text {
    text-transform: uppercase;
  }

  .font {
    font-size: 28rpx;
    font-family: PingFangSC;
    line-height: 26rpx;
    color: #999999;
  }

  .font_2 {
    font-size: 24rpx;
    font-family: PingFangSC;
    line-height: 23rpx;
    color: #00806b;
  }
}
</style>